﻿<%@ Page Title="" Language="C#" ClientIDMode="AutoID" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="RecruitingApplication.DashboardView.DashboardView" %>

<%@ Register Src="~/Controls/DashboardView/DashboardViewColumn.ascx" TagPrefix="DC" TagName="DashboardViewColumn" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    
    <script type="text/javascript" src="<%= this.ResolveUrl("~/Scripts/JQUI/jquery.ui.droppable.js") %>" ></script>
    <link href="<%= this.ResolveUrl("~/Styles/Dashboard.css") %>" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">

        function OnDropped($dropTarget, $dragItem) {
            
            //if we are removing the last application from a state, show a message
            //saying there are no applications
            if ($dragItem.siblings(".DashboardViewDraggable").size() == 1) {
                $dragItem.siblings(".DashboardViewEmptyColumn").removeClass("ui-helper-hidden");
            }

            //if we are adding the first application to a state, hide the 
            //div saying the state has no applications
            if ($dropTarget.children(".DashboardViewDraggable").size() == 0) {
                $dropTarget.children(".DashboardViewEmptyColumn").addClass("ui-helper-hidden");
            }

            //add the application to the new state, at the end
            //update the color associated with this application
            $dragItem.find(".DashboardViewColorHelper").css("background-color", "#FFFFFF");
            $dropTarget.append($dragItem);

            //get application and state id's
            var $app_id = $dragItem.find("#ApplicationID").val();
            var $state_id = $dropTarget.find("#StateID").val();

            //call function to update the database asynchronously 
            PageMethods.ChangeApplicationState($app_id, $state_id, 
                function () { },
                function () { //TODO handle errors
                });
        }

        $(function () {
            $(".DashboardViewDraggable").draggable({
                revert: "invalid",
                helper: "clone",
                start: function () {
                    //disable the drop target this draggable is already associated with
                    $(this).parent(".DashboardViewColumn").droppable("disable");
                },
                stop: function () {
                    //enable all drop targets
                    $(".DashboardViewColumn").droppable("enable");
                }
            });
            $(".DashboardViewColumn").droppable({
                drop: function (event, ui) {
                    $(this).children(".DashboardViewHeader").removeClass("ui-state-hover");
                    $(this).children(".DashboardViewHeader").removeClass("ui-state-highlight");
                    OnDropped($(this), ui.draggable);
                },
                activate: function (event, ui) { $(this).children(".DashboardViewHeader").addClass("ui-state-hover"); },
                deactivate: function (event, ui) { $(this).children(".DashboardViewHeader").removeClass("ui-state-hover"); },
                over: function (event, ui) { $(this).children(".DashboardViewHeader").addClass("ui-state-highlight"); },
                out: function (event, ui) { $(this).children(".DashboardViewHeader").removeClass("ui-state-highlight"); },
                tolerance: "touch",
                //hoverClass: "ui-state-highlight",
                //activeClass: "ui-state-hover"
            });

            $(".DashboardViewDraggable").dblclick(function () {
                var $id = $(this).find("#ApplicationID").val();
                window.location = CANDIDATE_PAGE_URL + '?appID=' + $id;
            });

            //show 'no data' message in any columns without applications
            $(".DashboardViewEmptyColumn").removeClass(function () {
                if ($(this).siblings(".DashboardViewDraggable").size() == 0) {
                    return "ui-helper-hidden";
                }
                else {
                    return "";
                }
            });
        });
    </script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<table style="width:100%;">
<tr>
    <asp:ListView ID="StateColumnsListView" runat="server">
        <EmptyDataTemplate>
            <td class="DashboardViewEmptyPage ui-state-disabled">
                There are currently no states in the database.
            </td>
        </EmptyDataTemplate>
        <ItemTemplate>
            <td style="vertical-align:top; height:100%; width:<%#((int)(100 / (int)DataBinder.Eval(Container.DataItem, "Count"))).ToString()%>%;">
                <DC:DashboardViewColumn StateName='<%# Eval("Name") %>' StateID='<%# Eval("ID") %>' runat="server"></DC:DashboardViewColumn>
            </td>
        </ItemTemplate>
    </asp:ListView>
</tr>
</table>
</asp:Content>
